<template>
  <MySexEcharts :option="option"></MySexEcharts>
</template>

<script>
import MySexEcharts from "@/views/echarts/MySexEcharts";
export default {
  name: "SexEcharts",
  components:{MySexEcharts},
  data(){
    const colorList = [
      "#42b8cc",
      "#c94f44",
    ];
    return{
      option:{
        title: {
          text: '性别比例',
          left: "center",

          textStyle: {
            color: "rgb(14,105,136)",
            fontSize: 35,
            fontStyle: "oblique",
          },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color: colorList,
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            startAngle: 180,
            endAngle: 360,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 6
            },
            data: [
              { value: 0, name: '男' },
              { value: 0, name: '女' },
            ]
          }
        ]
      }
    }

  },
  mounted() {
    this.getData()
  },
  methods:{
    getData(){
      this.$axios.get('/reader/SexCount')
          .then(res=>{
            console.log(res)
            this.option.series[0].data[0].value = res.data.data.man;
            this.option.series[0].data[1].value = res.data.data.woman;
          })
    }
  }
}
</script>

<style scoped>

</style>